<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>列表左侧的空白</title>

        <style type="text/css">
            .wrapper { border: 1px solid blue ; margin: 25px ; }
            .odd { background: #dedede ;  }
            .even { background: #ffff00 ;  }

            .wrapper ul { 
                border: 5px solid red ; 
                list-style: none ; /* 取消 列表项 标记 样式 */
            }

            /* 尝试通过设置 ul 的左侧【内边距】 来取消 左侧的空白 */
            .first ul { 
                padding-left: 0 ; /* IE8+ 及其它现代浏览器采用的方案 */
                margin-left: 0 ; /* IE 5 ~ IE 7 采用的解决方案 */
            }

            /* 尝试通过设置 li 的左侧【外边距】 来取消 左侧的空白 */
            .second li { margin-left: 0 ; }


        </style>
    </head>
    <body>

        <div class="wrapper first">
            <ul>
                <li class="odd">唐三藏</li>
                <li class="even">孙悟空</li>
                <li class="odd">白龙马</li>
                <li class="even">猪悟能</li>
                <li class="odd">沙悟净</li>
            </ul>
        </div>

        <div class="wrapper second">
            <ul>
                <li class="odd">唐三藏</li>
                <li class="even">孙悟空</li>
                <li class="odd">白龙马</li>
                <li class="even">猪悟能</li>
                <li class="odd">沙悟净</li>
            </ul>
        </div>
        
    </body>
</html>